import React from 'react';
import { Button, Form, Icon, Input, Select, Row, Col } from 'antd';
import { CustomSearch } from '@/pages/Recruitment/components';
// import { Grade } from '@/containers';
// import { Company, Grade } from '@/containers';
// import OrganizationSelect from '@/components/OrganizationSelect';
// import { eventTrack } from '@/utils/track';
// import GradeSelector from '@/pages/Organization/Job/components/GradeSelector';
import styles from '../index.less';
import { LEAVE_TYPE } from '../../dictionary';

const { Option } = Select;
function LeaveQuery({ form, handleSearch, location, reset }) {
    const { query } = location.location;
    const { getFieldDecorator } = form;
    const [advanceFold, setAdvanceFold] = React.useState(false);
    // 高阶条件
    const renderAdvanceCon = (
        <Row className={styles.advanceCon} style={{ display: advanceFold ? 'block' : 'none' }}>
            <Col xs={24} sm={24} md={24} lg={24} xl={6}>
                <Form.Item label="离职类型" style={{ width: '100%' }}>
                    {getFieldDecorator('dimissionType', {
                        initialValue: query?.dimissionType || undefined
                    })(
                        <Select style={{ minWidth: 180, width: '100%' }} placeholder="请选择" allowClear>
                            {LEAVE_TYPE.map(item => (
                                <Option key={item?.value} value={item?.value}>
                                    {item.text}
                                </Option>
                            ))}
                        </Select>
                    )}
                </Form.Item>
            </Col>
            {/* <Col xs={24} sm={24} md={24} lg={24} xl={6}>
                <Form.Item label="状态" style={{ width: '100%' }}>
                    {getFieldDecorator('dimissionStatus', {
                        initialValue: query?.dimissionStatus || undefined
                    })(
                        <Select
                            style={{ minWidth: 180, width: '100%' }}
                            mode="multiple"
                            maxTagCount={1}
                            placeholder="请选择"
                        >
                            {LEAVE_STATUS.filter(s => s.type === type).map(item => (
                                <Option key={item?.value} value={item?.value}>
                                    {item.text}
                                </Option>
                            ))}
                        </Select>
                    )}
                </Form.Item>
            </Col> */}
            <Col xs={24} sm={24} md={24} lg={24} xl={6}>
                <Form.Item label="处理人员" style={{ width: '100%' }}>
                    {getFieldDecorator('currentDealEmployeeName', {
                        initialValue: query?.currentDealEmployeeName || ''
                    })(<Input placeholder="请输入" allowClear style={{ minWidth: 180, width: '100%' }} />)}
                </Form.Item>
            </Col>
            {/* <Col xs={24} sm={24} md={24} lg={24} xl={6}>
                <Form.Item label="职级" style={{ width: '100%' }}>
                    {getFieldDecorator('rankValues', {
                        initialValue: query?.rankValues || []
                    })(<Grade style={{ minWidth: 180, width: '100%' }} />)}
                </Form.Item>
            </Col> */}
        </Row>
    );
    return (
        <Form layout="inline" className={styles.leave_form} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
            <>
                <Row>
                    <Col xs={24} sm={24} md={24} lg={24} xl={6}>
                        <Form.Item label="" style={{ width: '100%' }} wrapperCol={{ span: 22 }}>
                            {getFieldDecorator('keyword', { initialValue: query?.keyword || '' })(
                                <CustomSearch
                                    style={{ minWidth: 180, width: '100%' }}
                                    onSearch={val => {
                                        if (!val) return;
                                        handleSearch({ name: val });
                                    }}
                                    placeholder="搜索姓名、岗位"
                                />
                            )}
                        </Form.Item>
                    </Col>
                    {/* <Col xs={24} sm={24} md={24} lg={24} xl={6}>
                        <Form.Item label="行政机构" style={{ width: '100%' }}>
                            {form.getFieldDecorator('companyCode', {
                                initialValue: query?.companyCode || undefined
                            })(
                                <Company
                                    style={{ minWidth: 180, width: '100%' }}
                                    placeholder="请选择"
                                    getPopupContainer={triggerNode => triggerNode.parentElement}
                                    onClick={() => {
                                        eventTrack({
                                            eventName: 'personnel_management_recruitment_demand_list_zzjg_input_click',
                                            pageName: 'personnel_management_recruitment'
                                        });
                                    }}
                                />
                            )}
                        </Form.Item>
                    </Col>
                    <Col xs={24} sm={24} md={24} lg={24} xl={6}>
                        <Form.Item label="组织机构" style={{ width: '100%' }}>
                            {form.getFieldDecorator('organizationCode', {
                                initialValue: query?.organizationCode || undefined
                            })(
                                // <Organization
                                //     style={{ minWidth: 180, width: '100%' }}
                                //     placeholder="请选择组织机构"
                                //     getPopupContainer={triggerNode => triggerNode.parentElement}
                                //     onClick={() => {
                                //         eventTrack({
                                //             eventName: 'personnel_management_recruitment_demand_list_xzjg_input_click',
                                //             pageName: 'personnel_management_recruitment'
                                //         });
                                //     }}
                                // />
                                <OrganizationSelect
                                    isFunctional
                                    // onSelect={(code, node = {}) => {
                                    //     console.log(node.props.organizationName, 'xxx---');
                                    //     setFieldsValue({ transferToOrganizationName: node.props.organizationName });
                                    // }}
                                    extraQuery={{ organizationPermissions: 0, auditStatus: 2 }}
                                />
                            )}
                        </Form.Item>
                    </Col> */}
                    <Col xs={24} sm={24} md={24} lg={24} xl={6}>
                        <a onClick={() => setAdvanceFold(val => !val)}>
                            {/* {advanceFold ? '收起' : '高级搜索'} */}
                            高级搜索
                            <Icon type={advanceFold ? 'caret-up' : 'caret-down'} />
                        </a>
                        <Button type="primary" style={{ marginLeft: 12 }} onClick={() => handleSearch()}>
                            搜索
                        </Button>
                        <Button style={{ marginLeft: 12, color: 'rgba(0,0,0,0.45)' }} onClick={() => reset()}>
                            清空
                        </Button>
                    </Col>
                </Row>
                {renderAdvanceCon}
            </>
        </Form>
    );
}
export default LeaveQuery;
